<template>
    <div class="player">
        <nav-header></nav-header>
        <div class="palyer-info">
            <div class="player-video">
                <video-player  class="video-player vjs-custom-skin"
                               ref="videoPlayer"
                               @ended="onPlayerEnded()"
                               :playsinline="true"
                               :options="playerOptions"
                ></video-player>
            </div>
            <div class="palyer-list">
                <div class="player-title">{{video.title}}</div>
                <div class="player-count">{{video.episodes_count}}集</div>
                <div class="player-list-count">
                    <div class="player-item" v-for="item in playlist" v-bind:key="item.id">
                        <div v-if="item.num == playCount" class="playing">
                            <img src="../assets/images/playing.png" alt="">
                        </div>
                        <!--                        <div v-else @click="playCount = item.order">-->
                        <div v-else @click="checkedVideo(item.num)">
                            {{item.num}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 100px"></div>
        <nav-footer></nav-footer>
    </div>
</template>

<script>
    import NavFooter from "../components/NavFooter"
    import NavHeader from "../components/MovieNavHeader";
    export default {
        name: "player",
        data() {
            return {
                pid:this.$route.params.id,
                playCount: 1,
                playlist: [],
                video: {},
                playerOptions : {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: true, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: "" //url地址
                    }],
                    // width: document.documentElement.clientWidth, //播放器宽度
                    notSupportedMessage: '暂无视频资源', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    }
                }
            }
        },
        components: {
            NavHeader,
            NavFooter
        },
        mounted() {
            //获取视频列表
            this.http.get('api/movie/playlist/' + this.pid).then((res) => {
                this.playlist = res.result
                this._videoInfo()
                // console.log(res.result)
            })
            //获取video信息
            this.http.get('api/movie/info/' + this.pid).then((res) => {
                this.video = res.result
                // console.log(res.result)
            })
        },
        methods: {
            play() {
                console.log('play callback')
            },
            checkedVideo(order) {
                this.playCount = order
                this._videoInfo()
            },
            _videoInfo() {
                // this.playerOptions.sources[0].type = this.playlist[this.playCount - 1].type
                this.playerOptions.sources[0].src = this.playlist[this.playCount - 1].play_url
                // this.playerOptions.poster = this.playlist[this.playCount - 1].image
            },
            onPlayerEnded() {
                if (this.playCount < this.playlist.length) {
                    this.playCount = this.playCount + 1
                    this._videoInfo()
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .player {
        background: #121212;
        margin-top: 70px;
        .palyer-info {

            width: 1800px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            .player-video {
                width: 1428px;
                height: 744px;
                img {
                    width: 1428px;
                    height: 744px;
                }
            }
            .palyer-list {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: 20px;
                color: #fff;
                .player-title {
                    color: #fff;
                    font-size: 16px;
                    font-weight: 600;
                }
                .player-count {
                    font-size: 13px;
                    margin-top: 5px;
                }
                .player-list-count {
                    display: flex;
                    display: -webkit-flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    margin-top: 20px;
                    .player-item {
                        cursor: pointer;
                        width: 30px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        font-weight: 500;
                        font-size: 16px;
                        margin-right: 30px;
                        margin-top: 30px;
                        &:hover {
                            color: #0D9BFF;
                        }
                        .playing {
                            background: #000;
                            border-radius: 50px;
                            img {
                                margin-top: 8px;
                                width: 15px;
                                height: 15px;
                            }
                        }
                    }
                }
            }
        }
    }


</style>